<!-- 用户列表 -->
<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>管理员权限</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card>
            <!-- 搜索区域 -->
            <el-row>
                <el-col :span="9">
                    <el-input placeholder="请输入内容"
                        v-model="queryInfo.query" 
                        clearable @clear="getUserList">
                        <el-button slot="append" icon="el-icon-search"
                            @click="getUserList"></el-button>
                    </el-input>
                    
                </el-col>
            </el-row>
            <!-- 用户列表区域 -->
            <el-table :data="userlist"  stripe border >
                <el-table-column type="index"></el-table-column>
                <el-table-column label="姓名" prop="username"></el-table-column>
                <el-table-column label="邮箱" prop="email"></el-table-column>
                <el-table-column label="电话" prop="mobile"></el-table-column>
                <el-table-column label="角色" prop="role_name"></el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="修改用户信息" placement="top">
                            <el-button type="primary" icon="el-icon-edit"
                               @click="showEditDialog(scope.row.id)" ></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除此用户" placement="top">
                            <el-button type="danger" icon="el-icon-delete"
                            @click="DelUserByID(scope.row.id)"></el-button>
                        </el-tooltip>
                        
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页功能 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 5,10]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- 修改用户的对话框 -->
        <el-dialog
            title="修改用户" :visible.sync="editDialogVisible"
            width="50%" @close="editDialogClosed">
            <!-- 内容 -->
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
                <el-form-item label="用户名">
                  <el-input v-model="editForm.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="邮箱" props="email">
                    <el-input v-model="editForm.email" ></el-input>
                  </el-form-item>
                  <el-form-item label="手机" props="mobile">
                    <el-input v-model="editForm.mobile" ></el-input>
                  </el-form-item>
            </el-form>
            <!-- 页脚 -->
            <template #footer>
                <span class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUserInfo()">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            queryInfo:{
                // 搜索关键字
                query:'',
                // 当前页数
                pagenum:1,
                // 每页展示用户数量的大小
                pagesize:5,
            },
            userlist:[],
            total:0,

            editDialogVisible:false,
            // 查询到的用户信息
            editForm:{},
        }
    },
    created(){
        this.getUserList()
    },
    methods:{
        async getUserList(){
            // get方法请求  地址 与 参数（参数最好定义到data中）
            const { data:res} = await this.$http.get('users',{ params:this.queryInfo})
            
            if(res.meta.status !==200){
                return this.$message.error('获取用户列表失败')
            }
            this.userlist=res.data.users
            this.total=res.data.total
            console.log(res)
        },
        //监听pagesize改变的事件
        // 改变页面大小，再次发起请求
        handleSizeChange(newSize){
            this.queryInfo.pagesize=newSize
            this.getUserList()

        },
        //监听页码值改变的事件
        handleCurrentChange(newPage){
            this.queryInfo.pagenum=newPage
            this.getUserList()
        },
        // 修改用户操作
        async showEditDialog(id){
            // console.log(id)
            const { data:res} = await this.$http.get('users/'+id)
            console.log(res)
            if (res.meta.status !==200) {
                return this.$message.error('查询用户失败！')
            }

            this.editForm = res.data
            this.editDialogVisible=true
        },
        // 删除用户操作
        async DelUserByID(id){
            console.log(id)
            // 弹框询问
            const confirmResult= await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }
            ).catch(err => err)

            // 如果用户确认删除，则返回值为字符串 confirm
            // 如果用户取消删除，则返回值为字符串 cancel
            if(confirmResult !='confirm'){
                return this.$message.info('已取消删除')
            }

            console.log('确定了删除')
            const {data:res}=await this.$http.delete('users/'+id)
            if(res.meta.stutas !==200) {
                return this.$message.error('删除用户失败！')
            }
            return this.$message.success('删除用户成功！')
            this.getUserList()

        },
        // 弹窗关闭时重置
        editDialogClosed(){
            this.$ref.editFormRef.resetFields()
        },
        // 点击确认 提交数据请求
        async editUserInfo(){
            const {data:res} = await this.$http.put('users/' + this.editForm.id,{
                email:this.editForm.email,
                mobile:this.editForm.mobile
            })
            if(res.meta.status !==200){
                return this.$message.error('更新用户信息失败！')
            }

            // 关闭对话框
            this.editDialogVisible = false
            // 刷新数据列表
            this.getUserList()
            // 提示修改成功
            this.$message.success('更新用户信息成功！')
        }
    }
}
</script>

<style lang="less" scoped>

</style>